import { useEffect, useState } from "react";
import { Alert, Button, Steps } from "antd";
import { getHistoryList } from "./service";
const { Step } = Steps;

interface Props {
  serialNum: string;
  onDataChange: (data: any) => void;
}

const ProcessList: React.FC<Props> = (props) => {
  const [dataList, setDataList] = useState<any[]>([]);
  const _getHistoryList = async (serialNum: string) => {
    const res = await getHistoryList(serialNum);
    setDataList(res.data)
  }
  useEffect(() => {
    _getHistoryList(props.serialNum);
  }, [props.serialNum])
  useEffect(() => {
    props.onDataChange(dataList);
  }, [dataList])
  const currentIndex = dataList[dataList.length - 1]?.flag === '3' ?
    dataList.length : dataList.findIndex(item => ['1', '3'].includes(item.flag)) === -1 ? 0 : dataList.findIndex(item => item.flag === '1');
  return (
    <>
      {
        dataList.length ? <Steps progressDot current={currentIndex} >
          {
            dataList.map(item => (
              <Step key={item.serial} title={item.processNode} description={
                <div>
                  <div>{item.list && item.list[0].zhName}</div>
                  <div>2021-11-23 19:16</div>
                  {item.flag === '1' && <Button type='link' >催一下</Button>}
                </div>
              } />
            ))
          }
          {dataList[dataList.length - 1]?.flag === '3' && <Step title={
            <Alert message="流程结束" type="success" showIcon />
          } description={
            <div>
              <div>2021-11-23 19:16</div>
            </div>
          } />
          }
        </Steps> : ''
      }
    </>
  )
}

export default ProcessList;
